<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人信息修改</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <modal v-model="uploadFlag" title="上传工作照" @on-ok="updateAttach" >
        <i-form  :label-width="80">
            <form-item label="工作照:">
                <upload  action="renshi/user/upload" name="attach" :before-upload="doBeforeUpload" :on-success="uploadSuccess">
                    <i-button icon="ios-cloud-upload-outline">请选择..</i-button>
                </upload>
                <div class="img" :style="{'background-image':'url('+img+')'}" v-if="img"></div>
            </form-item>
            <form-item label="照片描述:">
                <i-input type="textarea" v-model="uploadForm.attachDescr"/>
            </form-item>
        </i-form>
    </modal>
    <modal v-model="updateFlagpwd" title="修改员工密码" @on-ok="updatepwd">
        <i-form    :label-width="80" style="padding: 30px" >
            <form-item label="员工名称" prop="username">
                <i-input v-model="user.username" size="large" readonly />
            </form-item>
            <form-item label="员工密码" prop="password">
                <i-input  type="password" v-model="user.password" size="large"/>
            </form-item>
        </i-form>
    </modal>
        <i-form ref="user":model="user"  :label-width="80":rules="ruleValidate"    style="margin-left: 300px;margin-top: 25px" >
            <form-item label="登录名:" prop="userCode">
                <i-input v-model="user.userCode" size="large"  style="width:250px"/>
            </form-item>
            <form-item label="名称:" prop="username">
                <i-input v-model="user.username" size="large"style="width:250px"/>
            </form-item>
            <form-item label="工作照:"prop="attachPath">
               <img :src="user.attachPath" alt="" width="50">
            </form-item>
                  <form-item label="用户性别" prop="gender">
                <!--<i-input v-model="user.gender6" size="large"/>-->
                <radio-group v-model="user.gender">
                    <radio :label="1">男</radio>
                    <radio :label="2">女</radio>
                </radio-group>
            </form-item>
            <form-item label="电话:" prop="phone">
                <i-input v-model="user.phone"type="number" size="large"style="width:250px"/>
            </form-item>
            <form-item label="生日:" prop="birthday">
                <i-input v-model="user.birthday" size="large" type="date" style="width:250px"/>
            </form-item>
            <form-item label="地址:" prop="address">
                <i-input v-model="user.address" size="large"style="width:250px"/>
            </form-item>
            <form-item label="邮箱" prop="email">
                <i-input v-model="user.email" size="large"style="width:250px"/>
            </form-item>
            <i-button type="success"@click="update('user')" size="small" style="margin-left: 100px">修改个人信息</i-button>
            <i-button type="success"@click="toUpdatepwd('user')" size="small">修改密码</i-button>
            <i-button type="info" size="small" @click="toUpload">上传工作照</i-button>
        </i-form>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
                user:{
                    userCode:'',
                    username:'',
                    phone:'',
                    birthday:'',
                    gender:'',
                    address:'',
                    email:'',
                },
            updateFlagpwd:false,
            uploadFlag:false,
            uploadForm:{
                id:null,
                attachPath:null,
                attachDescr:null,
            },
            img:null,
            ruleValidate: {
                userCode: [
                    {required: true, message: '请输入登录名', trigger: 'blur'}
                ],
                username: [
                    {required: true, message: '请输入姓名', trigger: 'blur'}
                ],
                phone: [
                    {required: true, message: '请输入电话'},
                   { type: 'number', message: '请输入正确的电话号码', trigger: 'blur',transform:(value) => Number(value)}
                ],
                birthday: [
                    {required: true, message: '请输入生日', trigger: 'blur'},
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: 'change', trigger: 'blur',type:'number'}
                ],
                address: [
                    {required: true, message: '必填', trigger: 'blur'}
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
                ],
            },
        },
        methods:{
            searchUserList(){
                axios.get(`${ctx}/sys/user/list`)
                    .then(({data})=>{
                        this.user=data.result;
                    });
            },
            update(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.user.phone.length!=11){
                            this.searchUserList()
                            return this.$Message.error('修改失败!电话号码必须为11位');
                        }
                        axios.post(`${ctxc}/sys/user/update`,this.user)
                            .then(({data})=>{
                                iview.Message.success({content:data.msg});
                                this.searchUserList();
                            });
                    }else {
                        this.$Message.error('修改失败!');
                    }
                })
            },
            toUpdatepwd(){
                this.updateFlagpwd=true;
            },
            updatepwd(){
                if(this.user.password==null||this.user.password.length<6){
                   this.searchUserList()
                  return this.$Message.error('修改失败!密码不能为空且必须大于等于6位');
                }
                     axios.post(`${ctx}/sys/user/updatepwd`,this.user)
                     .then(({data})=>{
                        this.updateFlagpwd=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.searchUserList();
                    });
            },
            toUpload(){
                this.uploadForm.id=this.user.id;
                this.uploadFlag = true;
            },
            doBeforeUpload(file){
                const reader=new FileReader();
                reader.readAsDataURL(file);
                reader.onloadend=()=>{
                    this.img=reader.result;
                }
            },
            uploadSuccess(response){
                console.log(response);
                this.uploadForm.attachPath=response.result.attachPath;
                iview.Message.success("上传成功！");
            },
            updateAttach(){
                axios.post(`${ctx}/renshi/user/updateAttach`,this.uploadForm)
                    .then(({data})=>{
                        this.updateFlag=false;
                        iview.Message.success(data.msg);
                        this.searchUserList();
                    });
            },
        },
        mounted(){
            this.searchUserList();
        },

    });
</script>
</body>
</html>
